<template>
  <div class="awit">
    <div class="a_inner">
      <img class="a_bg_3" src="../images/bg/3.png" alt="">
      <img class="a_bg_4" src="../images/bg/4.png" alt="">
      <div class="a_inner_top">
        <div class="a_inner_top_title">
          <h1 v-text="lang.h1Text"></h1>
        </div>
        <h6 v-text="lang.h6Text"></h6>
        <p v-text="lang.pText"></p>
      </div>
    
      <!-- 主要内容区 -->
      <div class="awit_content">
        <!-- 第一行 
        
        -->
        <div class="awit_content_one" :class="{awit_content__en: langKey == 'en'}">
          <div 
            v-for="(items, index) in awitOneList"
            :key="index"
            class="aco_item"
            :class="[items.itemClass]"
            @mouseover="items.isHover = true" 
            @mouseout="items.isHover = false"
          >
            <!-- 默认 -->
            <div class="aco_item_d" v-show="!items.isHover">
              <div class="aco_item_top"><img :src="items.imgUrl" alt=""></div>
              <ul 
                class="aco_item_ul"
                :class="[items.ulClass]"
              >
                <li 
                  v-for="(val, i) in lang.awitOneList[index].liTextList"
                  :key="val+i"
                  v-text="val.text"
                ></li>	
              </ul>
            </div>
            <!-- hover -->
            <div 
              class="aco_item_h" 
              :class="[items.hClass]"
              v-show="items.isHover"
            >
              <h6 v-text="lang.awitOneList[index].h6Text"></h6>
              <p v-text="lang.awitOneList[index].pText"></p>
            </div>
          </div>
        </div>

        <!-- 第二行 -->
        <div class="awit_content_two" :class="{awit_content__en: langKey == 'en'}">
          <div 
            v-for="(items, index) in awitTwoList"
            :key="index"
            :class="[items.itemClass]"
            class="aco_item"
            @mouseover="items.isHover = true" 
            @mouseout="items.isHover = false"
          >
            <!-- 默认 -->
            <div 
              class="aco_item_d" 
              v-if="!items.isCore" 
              v-show="!items.isHover"
            >
              <div class="aco_item_top"><img :src="items.imgUrl" alt=""></div>
              <ul 
                class="aco_item_ul"
                :class="[items.ulClass]"
              >
                <li 
                  v-for="(val, i) in lang.awitTwoList[index].liTextList"
                  :key="val.text+i"
                  v-text="val.text"
                ></li>	
              </ul>
            </div>
            <!-- hover -->
            <div 
              class="aco_item_h" 
              :class="[items.hClass]"
              v-if="!items.isCore"  
              v-show="items.isHover"
            >
              <h6 v-text="lang.awitTwoList[index].h6Text"></h6>
              <p v-text="lang.awitTwoList[index].pText"></p>
            </div>
            <!-- 中心点 -->
            <div v-if="items.isCore" class="aco_item aco_item_con"></div>
          </div>
          
        </div>

        <!-- 第三行 -->
        <div class="awit_content_three" :class="{awit_content__en: langKey == 'en'}">
          <div 
            v-for="(items, index) in awitThreeList"
            :key="index"
            class="aco_item"
            :class="[items.itemClass]"
            @mouseover="items.isHover = true" 
            @mouseout="items.isHover = false"
          >
            <!-- 默认 -->
            <div class="aco_item_d" v-show="!items.isHover">
              <div class="aco_item_top"><img :src="items.imgUrl" alt=""></div>
              <ul 
                class="aco_item_ul"
                :class="[items.ulClass]"
              >
                <li 
                  v-for="(val, i) in lang.awitThreeList[index].liTextList"
                  :key="val.text+i"
                  v-text="val.text"
                ></li>	
              </ul>
            </div>
            <!-- hover -->
            <div 
              class="aco_item_h" 
              :class="[items.hClass]"
              v-show="items.isHover"
            >
              <h6 v-text="lang.awitThreeList[index].h6Text"></h6>
              <p v-text="lang.awitThreeList[index].pText"></p>
            </div>
          </div>
        </div>
        
      </div>
    </div>
     
  </div>
</template>

<script>

export default {
  props: {
    lang: {
      type: Object,
    },
    langKey: String,
  },
  data () {
    return {
      

      /**
       * 结构
       * awit_content_one
       * 	->aco_item(for)
       * 		->aco_itemd(默认)
       * 			->aco_item_top
       * 			->aco_item_ul(for)
       * 		->aco_itemh(高亮)
       * 			->h6
       * 			->p
       */					
      awitOneList: [
        { 
          isHover: false,
          imgUrl: require("../images/wit/1.png"), 
          itemClass: 'aco_itemh',
          ulClass: 'aco_item_ul1',
          hClass: '',
        },{ 
          isHover: false,
          imgUrl: require("../images/wit/2.png"), 
          itemClass: 'aco_itemd',
          ulClass: 'aco_item_ul2',
          hClass: '',
        }
      ],
      awitTwoList: [
        { 
          isHover: false,
          isCore: false,
          imgUrl: require("../images/wit/3.png"), 
          itemClass: 'aco_itemd',
          ulClass: 'aco_item_ul3',
          hClass: 'padding64',
        },{ 
          isHover: false,
          isCore: true,
        },{ 
          isHover: false,
          isCore: false,
          imgUrl: require("../images/wit/4.png"), 
          itemClass: 'aco_itemh',
          ulClass: 'aco_item_ul5',
          hClass: 'padding80',
        },
      ],
      awitThreeList: [
        { 
          isHover: false,
          imgUrl: require("../images/wit/5.png"), 
          itemClass: 'aco_itemh',
          ulClass: 'aco_item_ul6',
          hClass: 'padding80',
        },{ 
          isHover: false,
          imgUrl: require("../images/wit/6.png"), 
          itemClass: 'aco_itemd',
          ulClass: 'aco_item_ul7',
          hClass: 'padding_top7',
        }
      ],
      
    }
  },

  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="stylus">
.awit 
  padding-bottom: 100px;
  // background: url(../images/bg2.png) no-repeat center top;
  background-size: auto 1010px;
  .a_inner
    .a_bg_3
      top: -86px;
      right: -186px;
    .a_bg_4
      top: 330px;
      left: -163px;
    h6
      margin-bottom: 20px;
      line-height: 22px;
      font-size: 16px;
    p
      margin-bottom: 20px;
      line-height: 20px;
      font-size: 14px;
      text-align: left;
    .awit_content
      position: relative;
      z-index: 1;
      overflow: hidden;
      height: 702px;
      font-size: 0;
      background: rgba(255,255,255,0.20);
      border: 1px solid rgba(255,255,255,0.70);
      border-radius: 22px;
      .aco_item
        overflow: hidden;
        display: inline-block;
        // padding-top: 39px;
        margin: 0 5px;
        width: 226px;
        height: 262px;
        font-size: 0; 
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        cursor: pointer;
        &.aco_itemh
          background-image: url(../images/pentagon_1.png);
        &.aco_itemd
          background-image: url(../images/pentagon_2.png);
        .aco_item_d{

        }
        .aco_item_h
          padding-top: 60px;
          &.padding64
            padding-top: 64px;
          &.padding80
            padding-top: 80px;
        h6
          // padding-top: 60px;
          line-height: 20px;
          font-size: 14px;
          color: #FFFFFF;
          text-align: center;
        p
          padding: 0px 12px;
          font-size: 12px;
          color: #FFFFFF;
          text-align: center
        .aco_item_top
          padding-top: 39px;
          height: 24px;
          // width: 78px;
          margin: 0 auto 8px;
          border-radius: 12px;
          // background-color: #fff;
          img
            height: 24px;
        .aco_item_ul
          text-align: left;
          padding-left: 82.8px;
          &>li
            position: relative;
            margin-bottom: 6px;
            line-height: 17px;
            font-size: 12px;
            color: #FFFFFF;
            &::before
              content: '';
              display: inline-block;
              width: 4.8px;
              height: 4.8px;
              margin-right: 5.7px; 
              transform: rotate(-45deg);
              border: 0.8px solid #FFFFFF;
        &.aco_item_h
          background-image: url(../images/pentagon_2.png);
        &.aco_item_con
          background-image: url(../images/pentagon_idcg.png);
          background-size: 200px 230px;
      .awit_content_one
        padding-top: 14px;
        margin-bottom: -60px;
        text-align: center;
        .aco_item_ul2
          padding-left: 58.8px;
      .awit_content_two
        margin-bottom: -60px;
        .aco_item_top
          padding-top: 57px;
        .aco_item_ul3
          padding-left: 94.8px;
        .aco_item_ul5
          padding-left: 73.8px;
      .awit_content_three
        .aco_item_top
          padding-top: 69px;
        .aco_item_ul6
          padding-left: 77.8px;
        .aco_item_ul7
          padding-left: 94.8px;
      .awit_content__en
        .aco_item_h
          padding-top 40px
          &.padding64
            padding-top 55px
          &.padding_top7
            padding-top: 50px;
          h6 
            margin-bottom 18px
          p
            line-height 18px
        .aco_item_ul1
          padding-left: 60px;
        .aco_item_ul2
          padding-left: 30px;
          font-size 12px
        .aco_item_ul3
          padding-left: 79px;
        .aco_item_ul5
          padding-left: 48px;
        .aco_item_ul6
          padding-left: 37px;
        .aco_item_ul7
          padding-left: 79px;

</style>
